<template>
	<!-- 搜索 -->
	<view>
		<!-- <view class="inp" :style="{backgroundImage: `linear-gradient(to bottom, ${bgColor1} , ${bgColor2})`}" -->
		<view v-if="searchState" class="inp"
			:style="{ backgroundImage: `linear-gradient(to bottom, ${searchBgcolor} , ${bgColor2})` }"
			@click="$onTo(`/pagesClass/search-rich/search-rich?swiperData=${swiperData}`)">
			<input type="text" class="search" disabled placeholder="请输入关键字查询" />
			<view class="search-mark">
				<image src="../../static/RICHhome/RICHsearch-2.png" mode="scaleToFill" class="icon"></image>
			</view>
			<swiper class="swiper_zi" vertical="true" autoplay="true" circular="true" interval="3000" @change="getItem">
				<swiper-item v-for="(item, index) in hotList" :key="index" :item-id="item">
					<view class="zimubox">
						<view class="swiper_item">{{ item }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view v-else class="inp" style="background-color: #f8f8f8"
			@click="$onTo(`/pagesClass-rich/search-rich/search-rich?swiperData=${swiperData}`)">
			<input type="text" class="search" disabled placeholder="请输入关键字查询" />
			<view class="search-mark">
				<image src="../../static/RICHhome/RICHsearch-2.png" mode="scaleToFill" class="icon"></image>
			</view>
			<swiper class="swiper_zi" vertical="true" autoplay="true" circular="true" interval="3000" @change="getItem">
				<swiper-item v-for="(item, index) in hotList" :key="index" :item-id="item">
					<view class="zimubox">
						<view class="swiper_item">{{ item }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'swiperSearch',
		props: {
			width: {
				type: String,
				default: '400rpx'
			},
			searchBgcolor: {
				type: String,
				default: '#e4e4e4'
			},
			bgColor: {
				type: String,
				default: '#e4e4e4'
			},
			searchDataObj: {
				type: Object,
				default: {}
			},
			searchState: {
				type: Boolean,
				default: false
			}
		},

		data() {
			return {
				hotList: [],
				swiperData: '',
				bgColor1: '#fbfbfd',
				bgColor2: '#fbfbfd',
				bgSearchColor: '',




				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,
			};
		},
		components: {},
		computed: {},
		mounted() {
			console.log('77777首页传给搜索框得数据', this.searchDataObj);
			uni.getStorage({
				key: 'searchTopColor',
				success(res) {
					// console.log(res)
					this.bgSearchColor = res.data;
					// console.log(this.username)
				}
			});
			console.log('8777', this.searchBgcolor);
		},
		created() {
			// 搜索页面数据获取
			this.fetchHistorySearch().catch((err) => {
				if (err === 'no uid') {
					this.eventId = this.$eventEmitter.subscribe('successLoginThenReFetch', this
					.fetchHistorySearch); // 登录成功时重新加载一下历史搜索数据
				}
			});
		},

		destroyed() {
			this.eventId && this.$eventEmitter.removeHandler('successLoginThenReFetch', this.eventId);
		},
		methods: {
			/**
			 * 请求历史搜索
			 */
			fetchHistorySearch() {
				if (this.$getUid()) {
					return this.$request('member/mall/userWordHistory/searchPage', {}, 'get', true).then((res) => {
						this.hotList = res.data?.hotSearchList || [];
						this.swiperData = res.data?.hotSearchList[0] || '';
					});
				} else {
					return Promise.reject('未登录');
				}
			},

			getItem(vla, it) {
				this.swiperData = this.hotList[vla.detail.current];
			}
		}
	};
</script>

<style lang="scss" scoped>
	.inp {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		background-color: white;

		.search {
			// border: 0.5rpx black solid;
			display: block;
			width: 100%;
			height: 70rpx;
			background: white;
			border-radius: 35rpx;
			margin: 20rpx 20rpx;
			padding: 0 60rpx;
			// background-color: black;
		}

		.icon {
			width: 29rpx;
			height: 29rpx;
			// position: absolute;
			// top: 40rpx;
			// left: 40rpx;
		}

		.search-mark {
			// width: 40rpx;
			// height: 40rpx;
			// border-radius: 5rpx;
			// background-color: gray;
			// border: 1px red solid;
			position: absolute;
			right: 45rpx;
			top: 38rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.swiper_zi {
		position: absolute;
		width: 50%;
		height: 34rpx;
		top: 40rpx;
		left: 40rpx;

		.zimubox {
			height: 34rpx;

			.swiper_item {
				font-size: 28rpx;
				font-weight: 500;
				color: #ababba;
			}
		}
	}
</style>